<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="dataForm" :model="dataForm" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="问卷类型" prop="questionType">
        <a-select v-model="dataForm.questionType" placeholder="请选择问卷类型">
          <a-select-option :value="1">个人问卷</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="问卷名称" prop="questionTopic">
        <a-input placeholder="请输入问卷名称" v-model="dataForm.questionTopic" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="截止时间" prop="questionEndTime">
        <a-space>
          <a-date-picker v-model="date" @change="onChangeDate" />
          <a-time-picker v-model="time" @change="onChangeTime" />
          <span>截止</span>
        </a-space>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="问卷说明" prop="description">
        <a-textarea placeholder="请输入问卷说明" v-model="dataForm.questionDescription" :auto-size="{ minRows: 3, maxRows: 5 }" />
      </a-form-model-item>
    </a-form-model>
    <div class="anty-form-btn">
      <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
      <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
    </div>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: "forms",
  data() {
    return {
      dataForm: {
        questionId: '',
        questionTopic: '',
        questionType: 1,
        questionEndTime: '',
        questionDescription: '',
      },
      confirmLoading: false,
      defaultDataForm: {},
      date: '',
      dateStr: '',
      time: '',
      timeStr: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        save: '/question/insertQuestion',
        edit: '/question/updateQuestionList',
      }
    }
  },
  computed: {
    validatorRules () {
      return {
        questionTopic: [
          { required: true, message: '请输入问卷名称!', trigger: 'blur' }
        ],
        questionType: [
          { required: true, message: '请选择问卷类型!', trigger: 'change' }
        ],
        questionEndTime: [
          { required: true, message: '请选择截止时间!', trigger: 'change' }
        ],
      }
    },
  },
  watch: {
    $route: {
      handler(to, from) {
        //深度监听，同时也可监听到param参数变化
        this.$nextTick(() => {
          this.dataForm.questionId = to.query.questionId
          console.log('this.dataForm.questionId', this.dataForm.questionId)
          if (this.dataForm.questionId) {
            this.confirmLoading = true
            Promise.all([
              this.getInfo()
            ]).then(() => {
              console.log('this.dataForm', this.dataForm)
              this.defaultDataForm = Object.assign({}, this.dataForm)
              console.log('this.defaultDataForm', this.defaultDataForm)
            })
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  mounted () {
    this.$refs['dataForm'].resetFields()
  },
  methods: {
    onChangeDate (dates, dateStrings) {
      console.log('dateStrings', dateStrings)
      this.dateStr = dateStrings
      if (this.dateStr && this.timeStr) {
        this.dataForm.questionEndTime = this.dateStr + ' ' + this.timeStr
        this.$refs.dataForm.clearValidate('questionEndTime')
      } else {
        this.dataForm.questionEndTime = ''
        this.$refs.dataForm.validateField('questionEndTime')
      }
    },
    onChangeTime (dates, dateStrings) {
      console.log('dateStrings', dateStrings)
      this.timeStr = dateStrings
      if (this.dateStr && this.timeStr) {
        this.dataForm.questionEndTime = this.dateStr + ' ' + this.timeStr
        this.$refs.dataForm.clearValidate('questionEndTime')
      } else {
        this.dataForm.questionEndTime = ''
        this.$refs.dataForm.validateField('questionEndTime')
      }
    },
    getInfo() {
      return new Promise((resolve, reject) => {
        getAction(`/question/getInfo/${ this.dataForm.questionId }`).then(res => {
          if (!res.success) {
            reject()
            return this.$message.error(res.message)
          }
          this.confirmLoading = false
          this.dataForm = { ...res.result }
          this.dateStr = this.dataForm.questionEndTime.split(' ')[0]
          this.timeStr = this.dataForm.questionEndTime.split(' ')[1]
          this.date = moment(this.dateStr, 'yyyy-MM-dd')
          this.time = moment(this.timeStr, 'HH:mm:ss')
          resolve()
        })
      })
    },
    emptyCurrForm () {
      this.date = ''
      this.time = ''
      this.dataForm = Object.assign({}, this.defaultDataForm)
      this.$refs['dataForm'].resetFields()
    },
    submitCurrForm () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let method
          let url
          if (this.dataForm.questionId) {
            method = 'post'
            url = this.url.edit
          } else {
            method = 'post'
            url = this.url.save
          }
          httpAction(url, this.dataForm, method).then((res) => {
            if (res.success) {
              this.$message.success({
                content: '保存成功!',
                duration: 1,
                onClose: () => {
                  this.$router.go(-1)
                }
              })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
